<template>
	<view class="class">
		<!-- 头部导航栏 -->
		<u-sticky>
			<view class="tabbar">
				<view class="tabbar-item" v-for="(item, index) in ReachBottom" :key="index" @click="clickTabs({ index })">
					<view class="text">{{ item.name }}</view>
					<view :class="showView === index ? 'showView' : 'deActive'"></view>
				</view>
			</view>
		</u-sticky>

		<!-- 空白块 -->
		<view class="block"></view>
		<!-- 课程内容 -->
		<!-- VIP课程 -->
		<view class="VIP-class" v-if="showView === 0">
			<view class="VIP-img"><image mode="aspectFit" class="img" :src="details.image" alt="vip"></image></view>
			<view class="card">
				<view class="card1">
					<view class="shop">剩余总课时</view>
					<view class="class-time">
						<text>{{ userData.keshi }}</text>
						<text>课时</text>
					</view>
				</view>
				<view class="card1">
					<view class="shop">购买课时</view>
					<view class="class-time"><u-number-box v-model="details.num" @change="valChange"></u-number-box></view>
				</view>

				<view class="card2">
					<view class="totals">
						<view class="total">课程总价</view>
						<view class="remarks">可用积分(10积分=1元)</view>
					</view>
					<view class="number">{{ details.price * details.num }}</view>
				</view>
				<view class="buttonss">
					<view class="buttons"><u-button @click="clickShopping(details)" size="mini" type="primary" text="购买"></u-button></view>
				</view>
			</view>

			<view class="list card">
				<view class="title">明星老师推荐</view>
				<view class="text" v-for="item in detailsItems" :key="item.id">
					<image mode="aspectFit" class="img" :src="item.image" :alt="item.title" />
					<view class="img-right">
						<view class="img-title">{{ item.teacher_name }}</view>
						<view class="img-text">毕业于{{ item.learn }}</view>
					</view>
				</view>
			</view>

			<!-- 教师 -->
			<view class="teacher " v-if="showView === 0">
				<!-- 	<view class="teacher-common-list card" v-for="item in ReachBottom[0].uniqueDetailsItems" :key="item.id">
					<view class="imgs"><image mode="aspectFit"  class="img" :src="item.image" :alt="item.image" /></view>

					<view class="img-list">
						<view class="img-title">{{ item.teacher_name }}</view>
						<view class="img-text">手机号码:{{ item.mobile }}</view>
						<view class="img-text" v-if="item.title">职称:{{ item.title }}</view>
						<view class="img-text" v-if="item.address">地址:{{ item.address }}</view>

						<view class="img-text" v-if="item.speciality">擅长:{{ item.speciality }}</view>
					</view>
					<view class="buttons"><u-button @click="clickYuyue(item)" size="mini" type="primary" text="预约"></u-button></view>
				</view> -->
				<view class="teacher-common-list card" v-for="item in ReachBottom[0].uniqueDetailsItems" :key="item.id">
					<view class="imgs"><image mode="aspectFit" class="img" :src="item.image" :alt="item.image" /></view>
					<view class="img-list">
						<view class="img-title">{{ item.teacher_name || '无名老师' }}</view>
						<view class="img-text" v-if="item.title">职称:{{ item.title || '暂无' }}</view>
						<view class="img-text" v-if="item.address">院校:{{ item.address || '暂无' }}</view>
					</view>
					<view class="buttons"><u-button @click="clickYuyue(item)" size="mini" type="primary" text="预约"></u-button></view>
				</view>
			</view>

			<!-- 下拉刷新组件 -->
			<txt-pulldown :flagIn="ReachBottom[showView].flagPull"></txt-pulldown>
		</view>
		<!-- 公开课程 -->
		<view class="common-class card" v-else-if="showView === 1">
			<!-- 公共课程列表 -->
			<view class="common-list" v-for="(item, index) in ReachBottom[1].uniqueDetailsItems" :key="item.id">
				<view class="img"><image mode="aspectFit" class="img" :src="item.image" :alt="item.image" /></view>

				<view class="img-list">
					<view class="img-title">{{ item.title }}</view>
					<view class="img-text">
						<text class="num">¥ {{ item.price }}</text>
						<text class="remarks">{{ item.sales }}人购买</text>
					</view>
				</view>
				<view class="buttons">
					<u-button @click="clickShopping(item)" size="mini" type="primary" text="购买"></u-button>
					<u-button
						@click="clickStar(item, index, showView)"
						size="mini"
						plain
						type="warning "
						:icon="!item.is_collect ? 'star' : 'star-fill'"
						:text="!item.is_collect ? '收藏' : '已收藏'"
					></u-button>
				</view>
			</view>
			<!-- 下拉刷新组件 -->
			<txt-pulldown :flagIn="ReachBottom[showView].flagPull"></txt-pulldown>
		</view>
		<!-- 其他课程 -->
		<view class="language card" v-else-if="showView === 2">
			<!-- 其他课程列表 -->
			<view class="common-list" v-for="item in ReachBottom[2].uniqueDetailsItems" :key="item.id">
				<view class="img"><image mode="aspectFit" class="img" :src="item.image" :alt="item.image" /></view>

				<view class="img-list">
					<view class="img-title">{{ item.title }}</view>
					<view class="img-text">
						<text class="num">¥ {{ item.price }}</text>
						<text class="remarks">{{ item.sales }}人购买</text>
					</view>
				</view>
				<view class="buttons">
					<u-button @click="clickShopping(item)" size="mini" type="primary" text="购买"></u-button>
					<u-button
						@click="clickStar(item, index, showView)"
						size="mini"
						plain
						type="warning "
						:icon="!item.is_collect ? 'star' : 'star-fill'"
						:text="!item.is_collect ? '收藏' : '已收藏'"
					></u-button>
				</view>
			</view>
			<!-- 下拉刷新组件 -->
			<txt-pulldown :flagIn="ReachBottom[showView].flagPull"></txt-pulldown>
		</view>

		<!-- 优惠券弹窗 -->
		<u-popup :show="show" @close="close">
			<view class="myCouponData">
				<view class="common-list" v-for="item in myCouponData" :key="item.id">
					<view class="img"><image mode="aspectFit" class="img" :src="item.image" :alt="item.image" /></view>

					<view class="img-list">
						<view class="img-title">{{ item.title }}</view>
						<view class="img-text">
							<text class="num">¥ {{ item.price }}</text>
							<text class="remarks">{{ item.sales }}人购买</text>
						</view>
					</view>
					<view class="buttons"><u-button class="button" @click="clickShopping(item)" size="mini" type="primary" text="购买"></u-button></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	teacher, //获取老师列表
	goods, // 购买商品id为1的商品
	get_list, // 公共课程 其他课程 列表
	submitShopping, // 提交订单
	addShopping, // 加入购物车或者立即购买
	myCoupon, // 优惠券
	collectStar // 点击添加收藏
} from '@/common/api.js';

import onReachBottoms from '@/common/mixin/onReachBottoms.js';
export default {
	mixins: [onReachBottoms],
	data() {
		return {
			tabbar: ['VIP课程', '公开课程', '其他课程'],
			value: 1,
			// 明星教师列表
			// 本页面将会运用独立的下拉刷新体
			ReachBottom: [
				// 教室管理
				{
					name: 'VIP课程',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				},
				// 教师管理
				{
					name: '公开课程',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				},
				{
					name: '其他课程',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				}
			],
			// VIP课程单价
			details: {
				image: '',
				title: '购买课时',
				price: null,
				sales: 0,
				id: 1,
				num: 1
			},
			// 公共课程
			commonData: null,
			// 其他课程
			languageData: null,
			// 优惠券弹窗
			show: false,
			// 收藏
			star: '收藏',
			// 个人信息
			userData: {}
		};
	},
	methods: {
		// 点击某个商品收藏
		async clickStar(item, index, showView) {
			await collectStar({ goods_id: item.id });

			item.is_collect = !item.is_collect;
			// this.Reset();
		},
		close() {
			this.show = false;
		},
		// 点击购买
		async clickShopping(item) {
			let details = {
				image: item.image,
				title: item.title,
				// 市场售价:
				marketprice: item.marketprice,
				price: item.price,
				// 关键字:
				keywords: item.keywords,
				// 库存
				stocks: item.stocks,
				// 主描述
				description:item.description,
				// 描述
				content: item.content,
				// 描述图片
				content2: item.content2,
				sales: item.sales,
				id: item.id,
				num: item.num || 1
			};
			uni.setStorageSync('shoppingDetails', details);
			uni.navigateTo({
				url: '/pages/class/details/details'
			});
			// 先打开优惠券页面
			// this.show = true
		},
		// 点击预约的时候
		async clickYuyue(item) {
			uni.setStorageSync('subscribeDetails', item);
			uni.navigateTo({
				url: '/pages/subscribe/details/detail/detail'
			});
		},
		valChange(e) {
			console.log('当前值为: ' + e.value);
		},
		async reqPaging1() {
			// 全部
			let { data, total } = await teacher({ limit: 10, page: this.ReachBottom[0].num });
			this.ReachBottom[0].uniqueDetailsItems = [...this.ReachBottom[0].uniqueDetailsItems,...data];
			this.ReachBottom[0].total = total;
			this.ReachBottom[0].flagPull = this.UsePullDown(this.ReachBottom[0].uniqueDetailsItems, this.ReachBottom[0].total);
		},
		async reqPaging2() {
			// 公共课程
			let commonData = await get_list({ params: { category: 1, t: 1 } });

			this.ReachBottom[1].uniqueDetailsItems = commonData;
			this.ReachBottom[1].total = this.ReachBottom[1].uniqueDetailsItems.length;
			this.ReachBottom[1].flagPull = this.UsePullDown(this.ReachBottom[1].uniqueDetailsItems, this.ReachBottom[1].total);
		},
		async reqPaging3() {
			// 其他课程
			let languageData = await get_list({ params: { category: 24, t: 1 } });
			this.ReachBottom[2].uniqueDetailsItems = languageData;
			this.ReachBottom[2].total = this.ReachBottom[2].uniqueDetailsItems.length;
			this.ReachBottom[2].flagPull = this.UsePullDown(this.ReachBottom[2].uniqueDetailsItems, this.ReachBottom[2].total);
		}
	},
	async onShow() {
		// 如果未登录就先登录
		if (!uni.getStorageSync('userData')) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		} else {
			this.userData = { ...this.userData, ...uni.getStorageSync('userData') };
			switch (false) {
				case !!this.userData.avatarUrl:
				case !!this.userData.nickName:
				case !!this.userData.phoneNumber:
					uni.navigateTo({
						url: '/pages/login/login'
					});
			}
		}

		// VIP课程
		let goodsData = await goods({ params: { id: 1 } });
		// this.details.price = goodsData.__goods__.price;
		// this.details.image = goodsData.__goods__.image;
		this.details = { ...this.details, ...goodsData.__goods__ };
		this.details.num = 1;
	}
};
</script>

<style lang="scss" script>
.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
	height: 100rpx;
	border-radius: 0 0 50rpx 50rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.tabbar-item {
		width: 170rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.text {
		// width: 120rpx;
		// background-color: aqua;
	}
	.showView {
		margin-top: 5rpx;
		height: 20rpx;
		width: 70rpx;
		background-color: #d2e8eb;
		border-radius: 10rpx;
	}
}
.block {
	height: 100rpx;
}
// VIP课程
.VIP-class {
	// padding-top: 100rpx;
	.VIP-img {
		margin: 28rpx auto 0;
		// padding: 100rpx 0 0 0;
		width: 672rpx;
		height: 410rpx;
		background: #5267ee;
		border-radius: 33rpx;
		.img {
			width: 672rpx;
			height: 410rpx;
		}
	}
	.card {
		.card1 {
			margin: 0 0 28rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.shop {
				margin-top: 28rpx;
			}
			.class-time {
				margin-top: 28rpx;
				margin-right: 28rpx;
				display: flex;
				align-items: center;
			}
		}
		.card2 {
			margin: 28rpx 0 28rpx 28rpx;
			display: flex;
			justify-content: space-between;
			.totals {
				display: flex;
				align-items: flex-end;
				margin: 0 0 28rpx 0;
				.remarks {
					font-size: 20rpx;
					color: #a5a5a5;
				}
			}
			.number {
				margin: 0 28rpx 28rpx 0;
			}
		}
		.buttonss {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			padding: 0 28rpx 28rpx 28rpx;
			.buttons {
				width: 100rpx;
				// height: 120rpx;
			}
		}
	}
	// 列表
	.list {
		.title {
			padding: 28rpx;
		}
		.text {
			height: 215rpx;
			margin-top: 38rpx;
			padding-left: 56rpx;
			display: flex;
			border-bottom: 2rpx solid #dddddd;
			.img {
				width: 150rpx;
				height: 150rpx;
			}
			.img-right {
				margin-left: 13rpx;
				.img-title {
					margin-bottom: 21rpx;
				}
				.img-text {
					color: #767678;
					font-size: 25rpx;
				}
			}
		}
		.text:last-child {
			padding-bottom: 0;
			border-bottom: none;
		}
	}
}
// 公共课程 其他课程

.common-list {
	width: 100%;
	height: 159rpx;
	padding: 30rpx 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.img {
		width: 238rpx;
		height: 134rpx;
	}
	.img-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 23rpx;
		.img-title {
			font-size: 28rpx;
			color: #3b3a3f;
		}
		.img-text {
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 22rpx;
				color: #a1a3a7;
			}
		}
	}
	.buttons {
		width: 100rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
}

.teacher {
	// 教师 教室预约列表
	.teacher-common-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: clac(765rpx - (56rpx));
		// margin: 28rpx 0;
		.imgs {
			margin: 28rpx;
		}
		.img {
			width: 165rpx;
			height: 165rpx;
		}
		.img-list {
			margin: 14rpx;
			// width: 100%;
			flex: 1;
			.img-title {
				font-size: 32rpx;
				color: #3b3a3f;
			}
			.img-text {
				color: #767678;
				font-size: 25rpx;
				width: 100%;
			}
		}

		.buttons {
			margin: 28rpx 28rpx 28rpx 0;
		}
	}
}
</style>
